import { GetAvatar } from "@/app/[language]/avatar/query/useGetAvatar";
import useGetAvatarFavorites from "@/app/[language]/avatar/query/useGetAvatarFavorites";
import NoteItem from "@/app/[language]/note/components/NoteItem";

import { useAvatarStore } from "@/state/Stores";
import { getInputMode } from "@/utilities/Utility";
import { observer } from "mobx-react-lite";
import { useCallback } from "react";
import {
  ListGroup,
  Nav,
  NavItem,
  NavLink,
  TabContent,
  TabPane,
} from "reactstrap";

export default observer(({ avatar: { avatarID } }: { avatar: GetAvatar }) => {
  const { tabPosition, favoritesTabPosition, setFavoritesTabPosition } =
    useAvatarStore();

  const { isFetched: isAvatarFavoritesLoaded, data: avatarFavorites } =
    useGetAvatarFavorites(
      getInputMode(favoritesTabPosition),
      tabPosition === 0 ? avatarID : undefined,
    );

  const getProperties = (i: number) => ({
    className: favoritesTabPosition === i ? "active route" : "route",
    onClick: () => {
      setFavoritesTabPosition(i);
    },
  });

  const FavoriteView = useCallback(
    ({ tabPosition }: { tabPosition: number }) => {
      return (
        <TabPane tabId={tabPosition}>
          <ListGroup>
            {isAvatarFavoritesLoaded
              ? avatarFavorites.map((avatarFavorite) => (
                  <NoteItem
                    {...avatarFavorite}
                    key={avatarFavorite.noteID}
                    wantAvatarID={avatarID}
                  />
                ))
              : [...Array(50).keys()].map((i) => (
                  <NoteItem
                    key={i}
                    noteID=""
                    artist=""
                    title="Loading…"
                    genre=""
                    levelText=""
                    level={0}
                  />
                ))}
          </ListGroup>
        </TabPane>
      );
    },
    [avatarFavorites, isAvatarFavoritesLoaded],
  );

  return (
    <>
      <Nav tabs>
        <NavItem>
          <NavLink {...getProperties(0)}>6K</NavLink>
        </NavItem>
        <NavItem>
          <NavLink {...getProperties(1)}>⑤K</NavLink>
        </NavItem>
        <NavItem>
          <NavLink {...getProperties(2)}>⑦K</NavLink>
        </NavItem>
        <NavItem>
          <NavLink {...getProperties(3)}>9K</NavLink>
        </NavItem>
        <NavItem>
          <NavLink {...getProperties(4)}>⑩K</NavLink>
        </NavItem>
        <NavItem>
          <NavLink {...getProperties(5)}>⑭K</NavLink>
        </NavItem>
        <NavItem>
          <NavLink {...getProperties(6)}>24</NavLink>
        </NavItem>
        <NavItem>
          <NavLink {...getProperties(7)}>48</NavLink>
        </NavItem>
      </Nav>
      <TabContent activeTab={favoritesTabPosition}>
        <FavoriteView tabPosition={0} />
        <FavoriteView tabPosition={1} />
        <FavoriteView tabPosition={2} />
        <FavoriteView tabPosition={3} />
        <FavoriteView tabPosition={4} />
        <FavoriteView tabPosition={5} />
        <FavoriteView tabPosition={6} />
        <FavoriteView tabPosition={7} />
      </TabContent>
    </>
  );
});